<template>
  <div class="query-editor h-full flex flex-col">
    <!-- 工具栏 -->
    <div class="editor-toolbar">
      <div class="toolbar-left">
        <div class="btn-group">
          <el-tooltip content="执行SQL查询 (F5) - 可执行选中的SQL" placement="bottom">
        <el-button
          type="primary"
          size="small"
          @click="executeQuery"
          :loading="executing"
          :disabled="!hasValidConnection || !sqlContent.trim()"
        >
          <el-icon><CaretRight /></el-icon>
              执行
        </el-button>
          </el-tooltip>
        
          <el-tooltip content="格式化SQL (Ctrl+Shift+F)" placement="bottom">
        <el-button
          size="small"
          @click="formatSQL"
          :disabled="!sqlContent.trim()"
        >
          <el-icon><MagicStick /></el-icon>
          格式化
        </el-button>
          </el-tooltip>

          <el-tooltip content="验证SQL语法" placement="bottom">
            <el-button
              size="small"
              @click="validateSQL"
              :disabled="!sqlContent.trim()"
            >
              <el-icon><Check /></el-icon>
              验证
            </el-button>
          </el-tooltip>
        </div>
        
        <el-divider direction="vertical" />
        
        <div class="btn-group">
          <el-tooltip content="保存查询 (Ctrl+S)" placement="bottom">
        <el-button
          size="small"
          @click="saveQuery"
          :disabled="!tab.unsaved"
        >
          <el-icon><Document /></el-icon>
              保存
        </el-button>
          </el-tooltip>
        
          <el-tooltip content="查询历史记录" placement="bottom">
        <el-button
          size="small"
          @click="showQueryHistory"
        >
          <el-icon><Clock /></el-icon>
          历史
        </el-button>
          </el-tooltip>
        </div>
        
        <el-divider direction="vertical" />
        
        <div class="btn-group">
          <el-tooltip content="清空编辑器" placement="bottom">
        <el-button
          size="small"
              type="danger"
              plain
          @click="clearEditor"
        >
          <el-icon><Delete /></el-icon>
          清空
        </el-button>
          </el-tooltip>
        </div>
      </div>
      
      <div class="toolbar-right">
        <div class="connection-info">
          <div class="connection-badge">
            <div class="connection-status" :class="{ connected: hasValidConnection }"></div>
            <span>{{ connectionName }}</span>
          </div>
          
          <div class="database-badge">
            <el-icon><Collection /></el-icon>
            <span>{{ currentDatabase }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑器和结果区域 -->
    <div class="editor-content flex-1 flex flex-col overflow-hidden">
      <!-- SQL编辑器 -->
      <div class="sql-editor flex-1 min-h-0" :style="{ flex: `0 0 ${editorHeight}px` }">
        <SqlEditor
          ref="sqlEditorRef"
          v-model="sqlContent"
          height="100%" 
          :tables="availableTables"
          :columns="availableColumns"
          :database-type="connection?.type?.toLowerCase() || ''"
          :show-toolbar="false"
          :show-line-numbers="true"
          :show-status-bar="true"
          :enable-highlight="true"
          :enable-autocomplete="true"
          :auto-validate="true"
          :debounce-time="300"
          placeholder="请输入SQL查询语句..."
          @change="handleSqlChange"
          @execute="executeQuery"
          @execute-selected="executeSelectedQuery"
          @format="handleSqlFormat"
          @validate="handleSqlValidate"
        />
      </div>

      <!-- 分割线 -->
      <div
        class="resize-handle bg-gray-200 hover:bg-gray-300 cursor-row-resize h-2"
        @mousedown="startResize"
      ></div>

      <!-- 结果区域 -->
      <div class="results-area flex-1 min-h-0 bg-white">
        <el-tabs v-model="activeResultTab" type="card" class="h-full">
          <!-- 查询结果 -->
          <el-tab-pane label="结果" name="results" class="h-full">
            <QueryResults 
              :result="queryResult" 
              :executing="executing"
              @export="handleExportResults"
            />
          </el-tab-pane>
          
          <!-- 执行计划 -->
          <el-tab-pane label="执行计划" name="plan">
            <QueryPlan 
              :plan="queryPlan" 
              :executing="analyzingPlan"
            />
          </el-tab-pane>
          
          <!-- 消息 -->
          <el-tab-pane label="消息" name="messages">
            <QueryMessages 
              :messages="queryMessages" 
              @clear="clearMessages"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 查询历史对话框 -->
    <el-dialog
      v-model="showHistoryDialog"
      title="查询历史"
      width="800px"
      :close-on-click-modal="false"
    >
      <div class="history-content">
        <div class="history-search mb-4">
          <el-input
            v-model="historySearch"
            placeholder="搜索查询历史..."
            clearable
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
        
        <div class="history-list">
          <div
            v-for="query in filteredHistory"
            :key="query.id"
            class="history-item"
            @click="loadHistoryQuery(query)"
          >
            <div class="history-header">
              <span class="history-time">{{ formatTime(query.timestamp) }}</span>
              <span :class="['history-status', query.success ? 'success' : 'error']">
                {{ query.success ? '成功' : '失败' }}
              </span>
            </div>
            <div class="history-sql">{{ query.sql }}</div>
            <div v-if="query.error" class="history-error">{{ query.error }}</div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
import { useConnectionStore, useDatabaseStore } from '@/stores'
import { useDBServiceStore } from '@/stores/dbService'
import { ListTable } from '@visactor/vtable'
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import { SqlEditor } from '@/components/sql-editor'
import { DatabaseService } from '@/services/database'
import { getQueryPlan } from '@/services/queryPlanService'
import { exportAsCSV, exportAsExcel, exportAsJSON } from '@/services/exportService'
import QueryResults from './query-editor/QueryResults.vue'
import QueryPlan from './query-editor/QueryPlan.vue'
import QueryMessages from './query-editor/QueryMessages.vue'
import { 
  Check, 
  Delete, 
  Document, 
  Clock, 
  MagicStick, 
  CaretRight,
  Collection,
  Search
} from '@element-plus/icons-vue'

const props = defineProps({
  tab: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update'])

const connectionStore = useConnectionStore()
const databaseStore = useDatabaseStore()
const dbServiceStore = useDBServiceStore()

// 响应式数据
const tableContainer = ref()
const sqlEditorRef = ref(null)
const table = ref(null)
const executing = ref(false)
const analyzingPlan = ref(false)
const activeResultTab = ref('results')
const editorHeight = ref(400)
const showHistoryDialog = ref(false)
const historySearch = ref('')
const queryMessages = ref([])
const queryPlan = ref(null)

// 自动完成数据
const availableTables = ref([])
const availableColumns = ref([])

// 计算属性
const connection = computed(() => {
  return connectionStore.getConnection(props.tab.connectionId)
})

const connectionName = computed(() => {
  return connection.value?.name || '未连接'
})

const currentDatabase = computed(() => {
  // 优先使用标签页中保存的数据库名称
  if (props.tab.database) {
    return props.tab.database
  }
  // 否则使用连接默认数据库
  return connection.value?.database || '未选择'
})

const hasValidConnection = computed(() => {
  const status = connectionStore.getConnectionStatus(props.tab.connectionId)
  return status.isConnected
})

const sqlContent = ref(props.tab.data?.sql || '')

// 监听tab变化，确保正确加载SQL内容
watch(
  () => props.tab.id,
  () => {
    // 当标签页ID变化时，重新加载SQL内容
    sqlContent.value = props.tab.data?.sql || ''
  },
  { immediate: true }
)

// 使用防抖来避免频繁更新
let updateTimeout = null
const debouncedUpdate = (value) => {
  if (updateTimeout) {
    clearTimeout(updateTimeout)
  }
  updateTimeout = setTimeout(() => {
    updateTabData({ sql: value }, false)
  }, 300) // 300ms防抖
  }

const queryResult = computed(() => {
  return databaseStore.getQueryResults(props.tab.id)
})

const queryHistory = computed(() => {
  return databaseStore.getConnectionQueries(props.tab.connectionId, 50)
})

const filteredHistory = computed(() => {
  if (!historySearch.value.trim()) {
    return queryHistory.value
  }
  
  const search = historySearch.value.toLowerCase()
  return queryHistory.value.filter(query => 
    query.sql.toLowerCase().includes(search)
  )
})

// 加载表和列数据的函数
const loadTableAndColumnData = async () => {
  try {
    // 如果有连接ID，尝试获取数据库表和列信息
    if (props.tab.connectionId) {
      const connStatus = connectionStore.getConnectionStatus(props.tab.connectionId)
      
      if (connStatus.isConnected) {
        // 获取数据库名称
        const databaseToUse = props.tab.database || connection.value?.database
        
        if (databaseToUse) {
          // 从数据库服务加载表（注意：使用 loadTables 而不是 getTables）
          const tables = await databaseStore.loadTables(props.tab.connectionId, databaseToUse)
          
          // 转换为自动完成需要的格式
          availableTables.value = tables.map(table => ({
            name: table.name,
            comment: table.comment || '',
            type: 'table'
          }))
          
          // 获取所有表的列信息
          const allColumns = []
          for (const table of tables) {
            try {
              // 使用 loadColumns 而不是 getColumns
              const columns = await databaseStore.loadColumns(
                props.tab.connectionId, 
                databaseToUse, 
                table.name
              )
              
              // 转换为自动完成需要的格式
              const formattedColumns = columns.map(column => ({
                name: column.name,
                type: column.type || 'unknown',
                comment: column.comment || '',
                table: table.name
              }))
              
              allColumns.push(...formattedColumns)
            } catch (e) {
              console.warn(`获取表 ${table.name} 列信息失败:`, e)
            }
          }
          
          availableColumns.value = allColumns
        }
      }
    }
  } catch (error) {
    console.error('加载表和列信息失败:', error)
    availableTables.value = []
    availableColumns.value = []
  }
}

// 监听连接状态变化，更新表和列信息
watch(
  () => {
    const conn = connectionStore.getConnection(props.tab.connectionId)
    const status = connectionStore.getConnectionStatus(props.tab.connectionId)
    return { 
      id: props.tab.connectionId,
      database: conn?.database,
      isConnected: status?.isConnected
    }
  },
  (newVal, oldVal) => {
    // 只有当连接ID、数据库或连接状态发生变化时才更新
    if (newVal.id !== oldVal?.id || 
        newVal.database !== oldVal?.database || 
        newVal.isConnected !== oldVal?.isConnected) {
      loadTableAndColumnData()
  }
  },
  { deep: true, immediate: true }
)

// 生命周期
onMounted(() => {
  setupKeyboardShortcuts()
  loadTableAndColumnData()
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleWindowResize)
  
  // 初始高度设置为窗口高度的40%
  setInitialEditorHeight()
})

onUnmounted(() => {
  // 清理所有定时器
  if (updateTimeout) {
    clearTimeout(updateTimeout)
  }
  if (tableRenderTimeout) {
    clearTimeout(tableRenderTimeout)
  }
  
  if (table.value) {
    table.value.release()
  }
  
  // 移除事件监听
  removeKeyboardShortcuts()
  window.removeEventListener('resize', handleWindowResize)
})

// 设置初始编辑器高度
const setInitialEditorHeight = () => {
  const containerEl = document.querySelector('.editor-content')
  if (containerEl) {
    const containerHeight = containerEl.offsetHeight
    editorHeight.value = Math.max(300, Math.floor(containerHeight * 0.4))
  }
}

// 处理窗口大小变化
const handleWindowResize = () => {
  // 重新计算编辑器和结果区域的布局
  const containerEl = document.querySelector('.editor-content')
  if (containerEl) {
    const containerHeight = containerEl.offsetHeight
    // 保持当前的比例
    const ratio = editorHeight.value / containerHeight
    editorHeight.value = Math.max(100, Math.floor(containerHeight * ratio))
  }
}

// 监听查询结果变化，更新表格 - 使用防抖避免频繁渲染
let tableRenderTimeout = null
watch(queryResult, (result) => {
  if (tableRenderTimeout) {
    clearTimeout(tableRenderTimeout)
  }
  
  tableRenderTimeout = setTimeout(() => {
  if (result && result.data && result.data.length > 0) {
    nextTick(() => {
      renderResultTable(result)
    })
  }
  }, 100) // 100ms防抖
})

const setupKeyboardShortcuts = () => {
  document.addEventListener('keydown', handleKeyDown)
}

const removeKeyboardShortcuts = () => {
  document.removeEventListener('keydown', handleKeyDown)
}

const handleKeyDown = (event) => {
  // Ctrl+R: 执行查询
  if ((event.ctrlKey || event.metaKey) && event.key === 'r') {
    event.preventDefault()
    executeQuery()
  }
  
  // Ctrl+S: 保存查询
  if ((event.ctrlKey || event.metaKey) && event.key === 's') {
    event.preventDefault()
    saveQuery()
  }
  
  // F5: 执行查询
  if (event.key === 'F5') {
    event.preventDefault()
    executeQuery()
  }
}

// 辅助函数：转义正则表达式中的特殊字符
const escapeRegExp = (string) => {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
}

// 检查SQL是否已包含数据库上下文
const hasDatabaseContext = (sql, dbType, dbName) => {
  if (!dbName) return true // 如果没有数据库名，则不需要添加
  
  const sqlUpper = sql.toUpperCase()
  const dbNameUpper = dbName.toUpperCase() // Create a local copy instead of modifying in place
  
  // 检查是否包含通用数据库选择语句
  if (sqlUpper.includes(`USE ${dbNameUpper}`)) return true
  
  // 检查特定数据库类型的选择语句
  switch (dbType) {
    case 'mysql':
    case 'mariadb':
      return sqlUpper.includes(`\`${dbNameUpper}\`.`) || 
             sqlUpper.includes(`${dbNameUpper}.`)
    
    case 'postgresql':
      // 检查是否包含SET search_path或者模式名前缀
      return sqlUpper.includes(`SET SEARCH_PATH TO "${dbNameUpper}"`) || 
             sqlUpper.includes(`SET SEARCH_PATH TO ${dbNameUpper}`) || 
             sqlUpper.includes(`${dbNameUpper}.`) ||
             sqlUpper.includes(`"${dbNameUpper}".`)
    
    case 'sqlserver':
      // 检查是否包含USE数据库或者数据库名前缀
      return sqlUpper.includes(`USE [${dbNameUpper}]`) ||
             sqlUpper.includes(`${dbNameUpper}.DBO.`) || 
             sqlUpper.includes(`${dbNameUpper}..`) ||
             sqlUpper.includes(`[${dbNameUpper}].`)
    
    case 'sqlite':
      // SQLite通常不需要指定数据库
      return true
      
    case 'dameng':
    case 'dm':
      // 达梦数据库的模式前缀检查 - 更完整的检查
      return sqlUpper.includes(`"${dbNameUpper}"."`) || 
             sqlUpper.includes(`${dbNameUpper}.`) ||
             sqlUpper.includes(`SET SCHEMA "${dbNameUpper}"`) ||
             sqlUpper.includes(`SET SCHEMA ${dbNameUpper}`) ||
             sqlUpper.includes(`SWITCH TO "${dbNameUpper}"`) ||
             sqlUpper.includes(`SWITCH TO ${dbNameUpper}`) ||
             // 检查常见DDL语句的模式前缀
             sqlUpper.includes(`CREATE TABLE "${dbNameUpper}".`) ||
             sqlUpper.includes(`CREATE TABLE ${dbNameUpper}.`) ||
             sqlUpper.includes(`ALTER TABLE "${dbNameUpper}".`) ||
             sqlUpper.includes(`ALTER TABLE ${dbNameUpper}.`) ||
             sqlUpper.includes(`DROP TABLE "${dbNameUpper}".`) ||
             sqlUpper.includes(`DROP TABLE ${dbNameUpper}.`)
    
    case 'oracle':
      // Oracle数据库上下文检查
      return sqlUpper.includes(`${dbNameUpper}.`) ||
             sqlUpper.includes(`"${dbNameUpper}".`) ||
             sqlUpper.includes(`ALTER SESSION SET CURRENT_SCHEMA = ${dbNameUpper}`) ||
             sqlUpper.includes(`ALTER SESSION SET CURRENT_SCHEMA = "${dbNameUpper}"`)
    
    case 'db2':
      // DB2数据库上下文检查
      return sqlUpper.includes(`${dbNameUpper}.`) ||
             sqlUpper.includes(`SET SCHEMA ${dbNameUpper}`) ||
             sqlUpper.includes(`SET SCHEMA "${dbNameUpper}"`) ||
             sqlUpper.includes(`SET CURRENT SCHEMA = ${dbNameUpper}`) ||
             sqlUpper.includes(`SET CURRENT SCHEMA = "${dbNameUpper}"`)
    
    default:
      // 通用检查 - 查找数据库名称前缀
      return sqlUpper.includes(`${dbNameUpper}.`)
  }
}

// 为SQL添加数据库上下文
const addDatabaseContext = (sql, dbType, dbName) => {
  if (!dbName) return sql
  
  // Create a local copy of dbName to avoid modifying computed properties
  const dbNameLocal = String(dbName)
  
  // 检查SQL的类型，不同SQL类型可能需要不同处理方式
  const sqlUpperTrimmed = sql.toUpperCase().trim()
  
  switch (dbType) {
    case 'mysql':
    case 'mariadb':
      return `USE \`${dbNameLocal}\`;\n${sql}`
    
    case 'postgresql':
      return `SET search_path TO "${dbNameLocal}";\n${sql}`
    
    case 'sqlserver':
      return `USE [${dbNameLocal}];\n${sql}`
    
    case 'sqlite':
      // SQLite不需要指定数据库
      return sql
      
    case 'dameng':
    case 'dm':
      // 达梦数据库的上下文添加方式 - 针对不同类型的SQL优化处理
      
      // 如果是CREATE TABLE，根据达梦语法特点处理
      if (sqlUpperTrimmed.startsWith('CREATE TABLE ') && !sqlUpperTrimmed.includes('.')) {
        // 对于CREATE TABLE语句，在表名前添加模式名
        const tableName = sql.substring('CREATE TABLE '.length).trim().split(/\s+/)[0]
        let updatedTableName = ''
        
        // 处理带引号的表名
        if (tableName.startsWith('"') && tableName.endsWith('"')) {
          // 已有引号，在内部添加模式名
          updatedTableName = `"${dbNameLocal}".${tableName}`
        } else if (tableName.includes('"')) {
          // 有部分引号，可能是复杂表名，保留原样，前面添加模式名
          updatedTableName = `"${dbNameLocal}".${tableName}`
        } else {
          // 没有引号的简单表名
          updatedTableName = `"${dbNameLocal}"."${tableName}"`
        }
        
        return sql.replace(/CREATE\s+TABLE\s+(\S+)/i, `CREATE TABLE ${updatedTableName}`)
      }
      
      // 如果是ALTER TABLE或DROP TABLE，也需要特殊处理
      else if ((sqlUpperTrimmed.startsWith('ALTER TABLE ') || sqlUpperTrimmed.startsWith('DROP TABLE ')) && !sqlUpperTrimmed.includes('.')) {
        const match = sql.match(/(?:ALTER|DROP)\s+TABLE\s+(\S+)/i)
        if (match && match[1]) {
          const tableName = match[1]
          let updatedTableName = ''
          
          if (tableName.startsWith('"') && tableName.endsWith('"')) {
            updatedTableName = `"${dbNameLocal}".${tableName}`
          } else if (tableName.includes('"')) {
            updatedTableName = `"${dbNameLocal}".${tableName}`
          } else {
            updatedTableName = `"${dbNameLocal}"."${tableName}"`
          }
          
          // 修复替换模式，避免把整个SQL语句作为要替换的目标
          return sql.replace(new RegExp(`(ALTER|DROP)\\s+TABLE\\s+${escapeRegExp(tableName)}`, 'i'), `$1 TABLE ${updatedTableName}`)
        }
      }
      
      // 对于SELECT/INSERT/UPDATE/DELETE等DML语句，添加SET SCHEMA前缀
      return `SET SCHEMA "${dbNameLocal}";\n${sql}`
    
    case 'oracle':
      // Oracle数据库上下文添加
      return `ALTER SESSION SET CURRENT_SCHEMA = "${dbNameLocal}";\n${sql}`
    
    case 'db2':
      // DB2数据库上下文添加
      return `SET CURRENT SCHEMA = "${dbNameLocal}";\n${sql}`
    
    default:
      // 如果是未知数据库类型，尝试使用通用的USE语句
      return `USE ${dbNameLocal};\n${sql}`
  }
}

// 执行选中的SQL
const executeSelectedQuery = (selectedSql) => {
  if (!selectedSql || !selectedSql.trim()) {
    ElMessage.warning('没有选中内容可执行')
    return
  }
  
  // 更新UI状态以显示选中内容
  addMessage('info', `执行选中SQL: ${selectedSql.substring(0, 100)}${selectedSql.length > 100 ? '...' : ''}`)
  
  // 调用执行查询的函数，传入选中的SQL
  executeQueryWithSql(selectedSql)
}

// 执行SQL查询
const executeQuery = async () => {
  if (!hasValidConnection.value) {
    ElMessage.warning('请先连接到数据库')
    return
  }
  
  // 获取SQL - 如果有选中内容则执行选中的SQL，否则执行全部
  let sql = sqlEditorRef.value ? sqlEditorRef.value.getExecutableSql().trim() : sqlContent.value.trim()
  if (!sql) {
    ElMessage.warning('请输入SQL查询语句')
    return
  }
  
  executeQueryWithSql(sql)
}

// 实际执行SQL查询的函数
const executeQueryWithSql = async (sql) => {
  if (!hasValidConnection.value) {
    ElMessage.warning('请先连接到数据库')
    return
  }
  
  if (!sql) {
    ElMessage.warning('请输入SQL查询语句')
    return
  }
  
  executing.value = true
  activeResultTab.value = 'results'
  // 重置执行计划
  queryPlan.value = null
  
  try {
    // 获取当前数据库类型和名称
    const conn = connectionStore.getConnection(props.tab.connectionId)
    const dbType = conn?.type?.toLowerCase() || 'unknown'
    // Create a local copy of the database name to avoid modifying computed property
    const dbName = currentDatabase.value !== '未选择' ? String(currentDatabase.value) : null
    
    // 检查SQL是否需要添加数据库上下文
    let contextAdded = false
    let originalSql = sql
    
    if (dbName && !hasDatabaseContext(sql, dbType, dbName)) {
      // 自动添加数据库上下文
      sql = addDatabaseContext(sql, dbType, dbName)
      
      // 记录上下文添加详情
      if (sql !== originalSql) {
        contextAdded = true
        addMessage('info', `已自动为查询添加数据库上下文: ${dbName}`)
        addMessage('info', `原始SQL: ${originalSql.substring(0, 100)}${originalSql.length > 100 ? '...' : ''}`)
        addMessage('info', `修改后SQL: ${sql.substring(0, 100)}${sql.length > 100 ? '...' : ''}`)
      }
    }
    
    // 添加执行消息
    addMessage('info', `执行SQL: ${sql.substring(0, 120)}${sql.length > 120 ? '...' : ''}`)
  
    // 检查是否需要进行多语句分割执行（主要针对达梦数据库）
    const shouldSplitExecution = shouldSplitStatements(sql, dbType)
    
    if (shouldSplitExecution) {
      // 分割SQL语句并逐条执行
      const result = await executeMultipleStatements(sql, dbType, props.tab.connectionId)
      
      // 如果多语句执行成功，直接返回
      if (result) {
        // 使用store方法保存查询结果，而不是直接赋值给计算属性
        await databaseStore.setQueryResults(props.tab.id, result)
        executing.value = false
        return
      }
      // 如果多语句执行失败或无需多语句执行，继续执行原始的单语句执行逻辑
    }
    
    // 执行查询
    const result = await databaseStore.executeQuery(
      props.tab.connectionId,
      sql,
      props.tab.id
    )
    
    // queryResult 会自动通过计算属性更新，不需要手动赋值
    
    if (result.error) {
      const errorMsg = result.error.toString()
      
      // 达梦数据库特有错误的正则表达式
      const damengErrors = [
        // 表对象不存在
        /无效的表或视图名/i,
        /Invalid table or view name/i,
        /表\s*["']?[\w\d_]+["']?\s*不存在/i,
        
        // 权限错误
        /没有.*权限/i,
        /No privilege/i,
        
        // 语法错误
        /语法错误/i,
        /Syntax error/i,
        
        // 模式相关错误
        /模式\s*["']?[\w\d_]+["']?\s*不存在/i,
        /Schema\s*["']?[\w\d_]+["']?\s*does not exist/i,
        
        // 列相关错误
        /列\s*["']?[\w\d_]+["']?\s*不存在/i,
        /Column\s*["']?[\w\d_]+["']?\s*does not exist/i
      ]
      
      // 通用数据库错误的正则表达式
      const tableErrors = [
        /table .* does not exist/i,  // PostgreSQL
        /Invalid object name/i,       // SQL Server
        /Table .* doesn't exist/i     // MySQL
      ]
      
      // 检查是否匹配达梦特定错误
      if (damengErrors.some(pattern => pattern.test(errorMsg))) {
        if (!contextAdded && dbType === 'dameng') {
          addMessage('warning', `查询失败，可能是表不存在或缺少数据库上下文。错误: ${errorMsg}`)
          
          // 达梦数据库的特定建议
          if (dbName) {
            addMessage('info', `建议: 对于达梦数据库，尝试以下方式:`)
            addMessage('info', `1. 在表名前添加模式名前缀: "${dbName}".表名 或 "${dbName}"."表名"`)
            addMessage('info', `2. 在SQL前添加SET SCHEMA语句: SET SCHEMA "${dbName}";`)
            
            // 如果SQL包含CREATE/ALTER/DROP TABLE，提供更具体的建议
            if (/CREATE\s+TABLE/i.test(originalSql)) {
              addMessage('info', `3. 对于CREATE TABLE语句，使用完整的表名: CREATE TABLE "${dbName}"."表名" (...)`)
              // 如果是创建表并包含COMMENT，提供分号分隔多语句的建议
              if (/COMMENT/i.test(originalSql)) {
                addMessage('info', `4. 对于带注释的CREATE TABLE语句，请确保每条语句以分号结束并分开执行：`)
                addMessage('info', `   CREATE TABLE "${dbName}"."表名" (...);`)
                addMessage('info', `   COMMENT ON TABLE "${dbName}"."表名" IS '注释';`)
                addMessage('info', `   COMMENT ON COLUMN "${dbName}"."表名"."列名" IS '注释';`)
              }
            } else if (/ALTER\s+TABLE/i.test(originalSql)) {
              addMessage('info', `3. 对于ALTER TABLE语句，使用完整的表名: ALTER TABLE "${dbName}"."表名" ...`)
            }
          }
        } else {
          addMessage('error', `查询执行失败: ${errorMsg}`)
        }
      }
      // 检查其他数据库的通用错误
      else if (tableErrors.some(pattern => pattern.test(errorMsg)) && !contextAdded) {
        addMessage('warning', `查询失败，可能是表不存在或缺少数据库上下文。错误: ${errorMsg}`)
        
        // 给出建议
        if (dbName) {
          addMessage('info', `建议: 尝试在表名前添加 "${dbName}." 前缀，例如: "SELECT * FROM ${dbName}.表名"`)
        }
      } else {
        addMessage('error', `查询执行失败: ${errorMsg}`)
        
        // 为特定类型的错误提供进一步分析和建议
        provideErrorSuggestions(errorMsg, dbType, originalSql)
      }
    } else {
      addMessage('success', `查询执行成功，返回 ${result.rowCount || 0} 行数据`)
      
      // 如果是SELECT查询，尝试获取执行计划
      if (sql.trim().toUpperCase().startsWith('SELECT')) {
        getExecutionPlan(sql)
      }
    }
    
  } catch (error) {
    addMessage('error', `查询执行失败: ${error.message}`)
    ElMessage.error('查询执行失败: ' + error.message)
  } finally {
    executing.value = false
  }
}

// 检查是否应该分割语句执行
const shouldSplitStatements = (sql, dbType) => {
  // 1. 首先检查SQL中是否包含分号（分割多个语句的标准方式）
  // 但要排除引号中的分号和注释中的分号
  const statements = splitStatements(sql, dbType)
  
  // 如果分割后有多条语句，则应该使用批量执行
  if (statements.length > 1) {
    return true
  }
  
  // 2. SQL Server特殊处理：检查是否包含GO关键字
  if (dbType === 'sqlserver' && /\bGO\b/i.test(sql)) {
    return true
  }
  
  // 3. 特定场景下需要分割执行的SQL类型
  const sqlUpper = sql.toUpperCase().trim()
  
  // DDL语句（CREATE、ALTER、DROP等）
  const hasDDL = /\b(CREATE|ALTER|DROP|TRUNCATE|COMMENT)\s+/i.test(sqlUpper)
  
  // 对于达梦数据库，DDL语句需要特殊处理
  if (dbType === 'dameng' && hasDDL) {
    return true
  }
  
  // 包含事务控制语句
  const hasTransactionControl = /\b(BEGIN|COMMIT|ROLLBACK|SAVEPOINT|START\s+TRANSACTION)\b/i.test(sqlUpper)
  
  // 批量插入或更新语句
  const hasBulkOperation = /\bINSERT\s+INTO\s+.*\s+VALUES\s*\(.*\)\s*,\s*\(/is.test(sqlUpper) ||
                           /\bINSERT\s+INTO\s+.*\s+SELECT\b/i.test(sqlUpper) ||
                           /\bMERGE\s+INTO\b/i.test(sqlUpper)
  
  // 如果是事务控制语句或批量操作，建议使用批量执行
  if (hasTransactionControl || (hasBulkOperation && dbType !== 'mysql')) {
    return true
  }
  
  return false
}

// 执行多条SQL语句
const executeMultipleStatements = async (sql, dbType, connectionId) => {
  try {
    addMessage('info', '检测到多条SQL语句，使用批量执行模式')
    
    // 分割SQL语句
    const statements = splitStatements(sql, dbType)
    
    if (statements.length === 0) {
      addMessage('warning', '没有有效的SQL语句可执行')
      return null
    }
    
    addMessage('info', `共有 ${statements.length} 条SQL语句需要执行`)
    
    // 记录开始时间
    const startTime = performance.now()
    
    // 使用批量执行API
    const batchResult = await dbServiceStore.executeBatchSQL(connectionId, statements)
    
    // 记录执行时间
    const endTime = performance.now()
    const executeTime = endTime - startTime
    
    // 处理结果
    if (batchResult) {
      // 记录批量执行的详细结果
      addMessage('success', `批量执行完成，成功: ${batchResult.successCount}, 失败: ${batchResult.failedCount}, 总耗时: ${batchResult.totalExecuteTime}ms`)
      
      // 记录每条语句的执行结果
      batchResult.results.forEach((result, index) => {
        const status = result.error ? 'error' : 'success'
        const message = result.error 
          ? `语句 #${index+1} 执行失败: ${result.error}`
          : `语句 #${index+1} 执行成功${result.affectedRows ? `, 影响行数: ${result.affectedRows}` : result.rowCount ? `, 返回行数: ${result.rowCount}` : ''}`
        
        addMessage(status, message, false) // 不显示时间戳
      })
      
      // 如果批量执行中有错误，停止在第一个错误处
      if (batchResult.stoppedOnError) {
        addMessage('warning', '批量执行在第一个错误处停止')
      }
      
      // 转换为前端所需的结果格式
      // 查找最后一个有查询结果的语句
      let lastQueryResult = null
      for (let i = batchResult.results.length - 1; i >= 0; i--) {
        const result = batchResult.results[i]
        if (result.queryResult && result.queryResult.rows) {
          lastQueryResult = result.queryResult
          break
        }
      }
      
      return {
        columns: lastQueryResult?.columns || [],
        data: lastQueryResult?.rows || [],
        rowCount: batchResult.results.reduce((sum, r) => sum + (r.rowCount || 0), 0),
        affectedRows: batchResult.results.reduce((sum, r) => sum + (r.affectedRows || 0), 0),
        executeTime: executeTime,
        success: batchResult.successCount > 0,
        error: batchResult.failedCount > 0 ? `${batchResult.failedCount} 条语句执行失败` : null
      }
    }
    
    return null
  } catch (err) {
    addMessage('error', `批量执行失败: ${err.message}`)
    throw err
  }
}

// 辅助函数：分割SQL语句
const splitStatements = (sql, dbType) => {
  // SQL Server特殊处理：使用GO作为分隔符
  if (dbType === 'sqlserver' && /\bGO\b/i.test(sql)) {
    return sql.split(/\bGO\b/i).map(s => s.trim()).filter(s => s && isValidSQLStatement(s))
  }
  
  const statements = []
  let currentStmt = ''
  let inQuote = false
  let quoteChar = ''
  let inComment = false
  let lineComment = false
  let blockComment = false
  let blockCommentDepth = 0 // 支持嵌套的块注释
  
  // 逐字符分析SQL，处理引号、注释和分号
  for (let i = 0; i < sql.length; i++) {
    const char = sql[i]
    const nextChar = sql[i + 1] || ''
    
    // 处理行注释 (-- 开始，换行结束)
    if (!inQuote && !blockComment && char === '-' && nextChar === '-') {
      lineComment = true
      currentStmt += char + nextChar
      i++ // 跳过下一个字符
      continue
    }
    
    // 处理块注释 (/* 开始，*/ 结束)
    if (!inQuote && !lineComment && char === '/' && nextChar === '*') {
      blockComment = true
      blockCommentDepth++
      currentStmt += char + nextChar
      i++ // 跳过下一个字符
      continue
    }
    
    if (!inQuote && blockComment && char === '*' && nextChar === '/') {
      blockCommentDepth--
      if (blockCommentDepth === 0) {
        blockComment = false
      }
      currentStmt += char + nextChar
      i++ // 跳过下一个字符
      continue
    }
    
    // 处理行注释结束
    if (lineComment && (char === '\n' || i === sql.length - 1)) {
      lineComment = false
      currentStmt += char
      continue
    }
    
    // 在注释中直接添加字符
    if (lineComment || blockComment) {
      currentStmt += char
      continue
    }
    
    // 处理引号
    if ((char === "'" || char === '"' || char === '`') && (!inQuote || quoteChar === char)) {
      // 检查是否为转义引号（例如：'',''）
      const prevChar = sql[i - 1] || ''
      if (inQuote && char === quoteChar && nextChar === quoteChar) {
        // 这是转义的引号，保留在字符串中
        currentStmt += char + nextChar
        i++ // 跳过下一个字符
        continue
      }
      
      inQuote = !inQuote
      if (inQuote) {
        quoteChar = char
      } else {
        quoteChar = ''
      }
      currentStmt += char
      continue
    }
    
    // 处理分号（仅在非引号和非注释状态下）
    if (char === ';' && !inQuote && !lineComment && !blockComment) {
      currentStmt += char
      const trimmedStmt = currentStmt.trim()
      if (trimmedStmt && isValidSQLStatement(trimmedStmt)) {
        statements.push(trimmedStmt)
      }
      currentStmt = ''
      continue
    }
    
    // 其他字符直接添加
    currentStmt += char
  }
  
  // 处理最后一条语句（如果没有分号）
  const trimmedStmt = currentStmt.trim()
  if (trimmedStmt && isValidSQLStatement(trimmedStmt)) {
    statements.push(trimmedStmt)
  }
  
  return statements
}

// 检查SQL语句是否有效（不为空且不仅包含注释）
const isValidSQLStatement = (sql) => {
  // 去除所有注释
  const withoutComments = sql
    .replace(/--.*?(\r\n|\r|\n|$)/g, '') // 移除行注释
    .replace(/\/\*[\s\S]*?\*\//g, '');   // 移除块注释
  
  // 检查剩余内容是否只有空白字符
  return withoutComments.trim().length > 0;
}

// 为特定类型的错误提供进一步的分析和建议
const provideErrorSuggestions = (errorMsg, dbType, sql) => {
  // 语法错误处理
  if (/syntax error/i.test(errorMsg) || /语法错误/i.test(errorMsg)) {
    addMessage('info', '可能的原因: SQL语法错误，请检查SQL语句的语法')
    
    // 针对不同数据库类型的常见语法错误进行检查
    if (dbType === 'dameng') {
      // 达梦特有语法错误检查
      if (/CREATE\s+TABLE/i.test(sql) && /COMMENT/i.test(sql) && !/COMMENT\s+ON/i.test(sql)) {
        addMessage('info', '建议: 达梦数据库中，表和列的注释需要使用COMMENT ON语法，例如:')
        addMessage('info', 'COMMENT ON TABLE 表名 IS \'注释内容\';')
        addMessage('info', 'COMMENT ON COLUMN 表名.列名 IS \'注释内容\';')
      }
      
      // 检查是否使用了MySQL的反引号
      if (/`/g.test(sql)) {
        addMessage('info', '建议: 达梦数据库不支持MySQL的反引号(`)标识符，请使用双引号(")替代')
      }
      
      // 检查是否缺少分号分隔多条语句
      if (/CREATE\s+TABLE/i.test(sql) && /COMMENT\s+ON/i.test(sql) && !sql.includes(';')) {
        addMessage('info', '建议: 达梦数据库执行多条语句时，需要使用分号(;)分隔每条语句，例如:')
        addMessage('info', 'CREATE TABLE 表名(...);')
        addMessage('info', 'COMMENT ON TABLE 表名 IS \'注释\';')
      }
    }
  }
  
  // 达梦数据库存储参数错误
  else if (/无效的存储参数/i.test(errorMsg) || /Invalid storage parameter/i.test(errorMsg)) {
    addMessage('error', '达梦数据库STORAGE子句语法错误')
    addMessage('info', '正确的STORAGE语法是: STORAGE(ON "表空间名")')
    addMessage('info', '示例: CREATE TABLE ... STORAGE(ON "USERS")')
    
    // 检查SQL中的STORAGE子句
    const storageMatch = sql.match(/STORAGE\s*\(([^)]+)\)/i)
    if (storageMatch && storageMatch[1]) {
      const storageContent = storageMatch[1]
      if (storageContent.includes(',')) {
        addMessage('warning', `检测到无效的STORAGE参数: ${storageContent}`)
        addMessage('info', '达梦数据库的STORAGE子句只接受表空间名称，不支持其他参数如CLUSTERBTR')
        
        // 提供修正建议
        const tablespaceMatch = storageContent.match(/ON\s+["']?(\w+)["']?/i)
        if (tablespaceMatch && tablespaceMatch[1]) {
          addMessage('info', `建议修改为: STORAGE(ON "${tablespaceMatch[1]}")`)
        }
      }
    }
  }
  
  // 权限错误处理
  else if (/permission denied/i.test(errorMsg) || /没有.*权限/i.test(errorMsg) || /no privilege/i.test(errorMsg)) {
    addMessage('info', '可能的原因: 当前用户没有执行此操作的权限')
    addMessage('info', '建议: 请联系数据库管理员获取相应权限')
  }
  
  // 无法解析的成员访问表达式错误（达梦数据库）
  else if (/无法解析.*的成员访问表达式/i.test(errorMsg) || /Cannot parse member access expression/i.test(errorMsg)) {
    addMessage('error', '检测到无效的SQL语句片段')
    addMessage('info', '可能的原因:')
    addMessage('info', '1. SQL语句不完整，例如只输入了表名而没有完整的查询语句')
    addMessage('info', '2. SQL语句之间的分隔符问题，请确保每条语句以分号(;)结束')
    addMessage('info', '3. 可能误将注释或其他非SQL内容作为语句执行')
    
    // 从错误信息中提取可能的表名
    const tableMatch = errorMsg.match(/\[([^\]]+)\]/);
    if (tableMatch && tableMatch[1]) {
      const tableName = tableMatch[1];
      addMessage('info', `检测到的内容: "${tableName}"`)
      addMessage('info', `如果您想查询该表，请使用: SELECT * FROM ${tableName};`)
      addMessage('info', `如果您想查看表结构，请使用: DESC ${tableName}; 或 DESCRIBE ${tableName};`)
    }
  }
}

const formatSQL = () => {
  if (!sqlContent.value.trim()) {
    ElMessage.warning('没有SQL内容可格式化')
    return
  }
  // 使用SqlEditor组件的format方法
  if (sqlEditorRef.value) {
    sqlEditorRef.value.format()
  }
}

const saveQuery = () => {
  // 保存查询到本地或服务器
  if (props.tab && props.tab.id) {
    // 更新数据
    updateTabData({ sql: sqlContent.value }, false)
    // 单独发送保存信号
  emit('update', { unsaved: false })
  ElMessage.success('查询已保存')
  }
}

const clearEditor = () => {
  // 通过确认对话框避免误操作
  if (sqlContent.value.trim()) {
    ElMessageBox.confirm('确定要清空编辑器内容吗？', '确认清空', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      if (sqlEditorRef.value) {
        sqlEditorRef.value.clear()
      } else {
        sqlContent.value = ''
      }
    }).catch(() => {})
  } else {
    sqlContent.value = ''
  }
}

const showQueryHistory = () => {
  showHistoryDialog.value = true
}

const loadHistoryQuery = (query) => {
  sqlContent.value = query.sql
  showHistoryDialog.value = false
}

// 导出查询结果
const handleExportResults = async (exportInfo) => {
  if (!queryResult.value || !queryResult.value.data?.length === 0) {
    ElMessage.warning('没有可导出的数据')
    return
  }
  
  try {
    // 如果没有参数，显示默认导出对话框
    if (!exportInfo) {
      exportInfo = { format: 'csv' }
    }
    
    const { format } = exportInfo
    const data = queryResult.value.data
    const columns = queryResult.value.columns
    const timestamp = dayjs().format('YYYYMMDD_HHmmss')
    
    switch (format) {
      case 'csv':
        await exportAsCSV(
          data, 
          columns, 
          `query_result_${timestamp}.csv`
        )
        ElMessage.success('已导出为CSV文件')
        break
        
      case 'xlsx':
        await exportAsExcel(
          data, 
          columns, 
          `query_result_${timestamp}.xlsx`
        )
        ElMessage.success('已导出为Excel文件')
        break
        
      case 'json':
        await exportAsJSON(
          data, 
          columns, 
          `query_result_${timestamp}.json`
        )
        ElMessage.success('已导出为JSON文件')
        break
        
      default:
        ElMessage.warning('不支持的导出格式')
    }
  } catch (error) {
    console.error('导出失败:', error)
    ElMessage.error(`导出失败: ${error.message}`)
  }
}

const renderResultTable = (result) => {
  if (!tableContainer.value || !result.data || result.data.length === 0) return
  
  // 释放之前的表格
  if (table.value) {
    table.value.release()
  }
  
  // 生成列配置
  const columns = result.columns?.map(col => ({
    field: col.name,
    title: col.name,
    width: 150,
    headerStyle: {
      bgColor: '#f5f7fa',
      color: '#606266',
      fontWeight: 'bold'
    }
  })) || []
  
  // 如果没有列信息，从数据推断
  if (columns.length === 0 && result.data.length > 0) {
    const firstRow = result.data[0]
    Object.keys(firstRow).forEach(key => {
      columns.push({
        field: key,
        title: key,
        width: 150,
        headerStyle: {
          bgColor: '#f5f7fa',
          color: '#606266',
          fontWeight: 'bold'
        }
      })
    })
  }
  
  // 创建表格 - 简化配置以提高性能
  table.value = new ListTable(tableContainer.value, {
    columns,
    records: result.data.slice(0, 1000), // 限制显示行数以提高性能
    widthMode: 'standard',
    heightMode: 'autoHeight',
    autoWrapText: false, // 禁用自动换行以提高性能
    hover: false, // 禁用悬停效果
    select: false, // 禁用选择功能
    theme: {
      defaultStyle: {
        borderLineWidth: 1,
        borderColor: '#e5e7eb'
      }
    },
    // 性能优化配置
    frozenColCount: 0,
    rightFrozenColCount: 0,
    bottomFrozenRowCount: 0,
    topFrozenRowCount: 0
  })
}

const addMessage = (type, text) => {
  queryMessages.value.unshift({
    type,
    text,
    timestamp: new Date()
  })
  
  // 限制消息数量
  if (queryMessages.value.length > 100) {
    queryMessages.value = queryMessages.value.slice(0, 100)
  }
}

const updateTabData = (data, markUnsaved = true) => {
  if (props.tab && props.tab.id) {
    // 更新本地状态
    if (data.sql !== undefined) {
      sqlContent.value = data.sql
    }
    
    // 发送更新事件
    if (markUnsaved) {
      emit('update', { data: { ...props.tab.data, ...data }, unsaved: true })
    } else {
      emit('update', { data: { ...props.tab.data, ...data } })
    }
  }
}

const formatTime = (timestamp) => {
  return dayjs(timestamp).format('HH:mm:ss')
}

const formatDuration = (duration) => {
  if (!duration) return '0ms'
  
  // 如果duration是数字（毫秒）
  if (typeof duration === 'number') {
    if (duration < 1000) {
      return `${Math.round(duration)}ms`
    } else {
      return `${(duration / 1000).toFixed(2)}s`
    }
  }
  
  // 如果duration是字符串（如"1.5s"）
  if (typeof duration === 'string') {
    return duration
  }
  
  // 如果duration是Duration对象（纳秒）
  if (typeof duration === 'object' && duration !== null) {
    // Go的time.Duration是纳秒，需要转换为毫秒
    const ms = duration / 1000000
    if (ms < 1000) {
      return `${Math.round(ms)}ms`
    } else {
      return `${(ms / 1000).toFixed(2)}s`
    }
  }
  
  return String(duration)
}

// 分割线拖拽
let isResizing = false
let startY = 0
let startHeight = 0
let containerHeight = 0

const startResize = (event) => {
  isResizing = true
  startY = event.clientY
  startHeight = editorHeight.value
  containerHeight = document.querySelector('.editor-content').offsetHeight
  
  // 添加全局事件监听
  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
  
  // 防止文本选择
  document.body.style.userSelect = 'none'
  document.body.style.cursor = 'row-resize'
  
  event.preventDefault()
}

const handleResize = (event) => {
  if (!isResizing) return
  
  // 计算新的高度
  const deltaY = event.clientY - startY
  let newHeight = startHeight + deltaY
  
  // 限制编辑器最小和最大高度
  const minHeight = 100
  const maxHeight = containerHeight - 200 // 保留至少200px给结果区域
  
  newHeight = Math.max(minHeight, Math.min(newHeight, maxHeight))
  editorHeight.value = newHeight
  
  event.preventDefault()
}

const stopResize = () => {
  if (!isResizing) return
  
  isResizing = false
  
  // 移除全局事件监听
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
  
  // 恢复正常样式
  document.body.style.userSelect = ''
  document.body.style.cursor = ''
}

// SQL编辑器事件处理
const handleSqlChange = (value) => {
  // 立即更新本地变量，确保UI一致性
  sqlContent.value = value

  // 防抖更新到标签页数据存储
  debouncedUpdate(value)
  
  // 直接更新标签页数据以确保内容持久化
  // 但不更新 unsaved 状态，让防抖处理来避免频繁标记未保存
  updateTabData({ sql: value }, false)
}

const handleSqlFormat = (event) => {
  if (event.success) {
    ElMessage.success('SQL格式化完成')
  } else {
    ElMessage.error('SQL格式化失败')
  }
}

const handleSqlValidate = (result) => {
  if (result.errors.length > 0) {
    ElMessage.error(`SQL验证失败: ${result.errors[0]}`)
  } else if (result.warnings.length > 0) {
    ElMessage.warning(`SQL验证警告: ${result.warnings[0]}`)
  } else {
    ElMessage.success('SQL验证通过')
  }
}

// 获取执行计划
const getExecutionPlan = async (sql) => {
  // 只为SELECT语句获取执行计划
  if (!sql.trim().toUpperCase().startsWith('SELECT')) {
    return
  }
  
  try {
    analyzingPlan.value = true
    addMessage('info', '正在分析查询执行计划...')
    
    // 获取执行计划
    const plan = await getQueryPlan(
      props.tab.connectionId, 
      sql, 
      DatabaseService
    )
    
    if (plan.error) {
      addMessage('warning', `获取执行计划失败: ${plan.error}`)
    } else {
      addMessage('success', '查询执行计划分析完成')
    }
    
    queryPlan.value = plan
  } catch (error) {
    addMessage('error', `获取执行计划失败: ${error.message}`)
  } finally {
    analyzingPlan.value = false
  }
}

// 清除消息
const clearMessages = () => {
  queryMessages.value = []
}

const validateSQL = () => {
  if (!sqlContent.value.trim()) {
    ElMessage.warning('没有SQL内容可验证')
    return
  }
  // 使用SqlEditor组件的validate方法
  if (sqlEditorRef.value) {
    const result = sqlEditorRef.value.validate()
    handleSqlValidate(result)
  }
}
</script>

<style scoped>
.query-editor {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.editor-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  height: 50px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.toolbar-left {
  display: flex;
  align-items: center;
}

.toolbar-right {
  display: flex;
  align-items: center;
}

.btn-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 连接信息样式 */
.connection-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.connection-badge, .database-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 4px;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  color: #475569;
}

.connection-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ef4444;
}

.connection-status.connected {
  background-color: #10b981;
}

.database-badge {
  background-color: #eff6ff;
  border-color: #dbeafe;
  color: #3b82f6;
}

.editor-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sql-editor {
  position: relative;
  overflow: hidden;
}

.resize-handle {
  height: 8px;
  cursor: row-resize;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.resize-handle::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 4px;
  background-color: #d1d5db;
  border-radius: 2px;
}

.resize-handle:hover {
  background-color: #e5e7eb;
}

.resize-handle:hover::after {
  background-color: #3b82f6;
}

.results-area {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.result-stats {
  padding: 8px 0;
  border-bottom: 1px solid #e5e7eb;
}

.vtable-container {
  height: 400px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

.message-item {
  padding: 8px 12px;
  margin-bottom: 4px;
  border-radius: 4px;
  border-left: 3px solid #e5e7eb;
}

.message-item.message-info {
  background: #f0f9ff;
  border-left-color: #3b82f6;
}

.message-item.message-success {
  background: #f0fdf4;
  border-left-color: #10b981;
}

.message-item.message-error {
  background: #fef2f2;
  border-left-color: #ef4444;
}

.message-time {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.message-text {
  font-size: 14px;
  color: #374151;
}

.history-item {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.history-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.history-time {
  font-size: 12px;
  color: #6b7280;
}

.history-status.success {
  color: #10b981;
  font-weight: 500;
}

.history-status.error {
  color: #ef4444;
  font-weight: 500;
}

.history-sql {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #374151;
  background: #f9fafb;
  padding: 8px;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-all;
}

.history-error {
  margin-top: 8px;
  font-size: 12px;
  color: #ef4444;
  background: #fef2f2;
  padding: 6px 8px;
  border-radius: 4px;
}

:deep(.el-tabs__content) {
  height: calc(100% - 40px);
  overflow: hidden;
}

:deep(.el-tab-pane) {
  height: 100%;
  overflow: auto;
}

/* SQL编辑器样式覆盖 */
.sql-editor .sql-editor {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

/* 工具栏按钮样式优化 */
:deep(.el-button--small) {
  padding: 6px 12px;
  height: 32px;
  font-size: 13px;
  transition: all 0.2s;
}

:deep(.el-button) {
  font-weight: 500;
}

:deep(.el-button:hover) {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

:deep(.el-divider--vertical) {
  height: 24px;
  margin: 0 12px;
}

/* El-tooltip样式增强 */
:deep(.el-tooltip__trigger) {
  display: inline-flex;
}
</style> 